import { ElMessage } from "element-plus";
import "element-plus/theme-chalk/el-message.css";
import L from "leaflet";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
import { begin, end } from "@/assets/img.js";
const mapStore = useMapStore(pinia);

const setPolyLine = (map: any, points: number[][]) => {
  if (points.length === 0) {
    ElMessage({
      message: "无行驶记录数据",
      type: "error",
    });
    return;
  }

  // 清除所有的图层
  const allLayers = map._layers; // 注意：_layers是一个内部属性，可能在未来版本中改变

  // 遍历所有图层，并检查它们是否是L.layerGroup的实例
  for (const layerId in allLayers) {
    const layer = allLayers[layerId];

    // 检查图层是否是L.layerGroup的实例
    if (layer instanceof L.LayerGroup) {
      // 如果是，则从地图上移除它
      map.removeLayer(layer);
    }

    // 注意：对于嵌套的layerGroup（即layerGroup中包含其他layerGroup）
  }

  const layerGroup = L.layerGroup().addTo(map);

  for (let i = 0; i < points.length; i++) {
    L.marker(points[i], {
      icon: L.icon({
        iconUrl: begin, // 图标图片的URL
        iconSize: [32, 32], // 图标的大小
        iconAnchor: [15, 15], // 图标的锚点，即图标的位置应该放置在地图上的位置
        popupAnchor: [-3, -76], // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
      }),
    }).addTo(layerGroup);
  }

  // L.polyline
  //   .antPath(points, {
  //     color: "#006600",
  //     fillColor: "#006600",
  //     pulseColor: "#e5ffe5",
  //     opacity: 6,
  //     delay: 10000,
  //     dashArray: [5, 30]
  //   })
  //   .addTo(layerGroup);

  // L.marker(points[points.length - 1], {
  //   icon: L.icon({
  //     iconUrl: end, // 图标图片的URL
  //     iconSize: [32, 32], // 图标的大小
  //     iconAnchor: [15, 15], // 图标的锚点，即图标的位置应该放置在地图上的位置
  //     popupAnchor: [-3, -76] // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
  //   })
  // }).addTo(layerGroup);
};

export default setPolyLine;
